<template>
  <div class="home">
    <van-swipe
            vertical
            class="my-swipe"
            :touchable="true"
            @change="onChange"
            :show-indicators="false">
      <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
        <video loop webkit-playsinline="true"
               x5-video-player-type="h5-page"
               x5-video-player-fullscreen="true"
               playsinline
               preload="auto"
               :poster="item.cover"
               :src="item.url"
               playsinline = "true"
               width="100%"
               @click="pauseVideo"></video>
        <img v-show="iconPlayShow" class="icon_play" @click="playvideo"
             src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575340653940esdHR.png"/>
        <div class="tools_right">
          <div>
            <van-image
                    round
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                    class="tag_image"
            />
            <van-icon name="add" class="add"/>
          </div>

        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  let videoProcessInterval;
  export default {
    name: 'Home',
    components: {

    },
    data(){
      let u = navigator.userAgent;
      return{
        active:0,
        current:0,
        playOrPause:true,
        isVideoShow: true,
        iconPlayShow: true,
        videoProcess: 0,//视频播放进度
        isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
        isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
        videoList: [{
          url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',//视频源
          cover: 'http://oss.jishiyoo.com/images/file-1575341210559.png',//封面
          tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',//作者头像
          fabulous: false,//是否赞过
          tagFollow: false,//是否关注过该作者
          author_id: 1,//作者ID
          author:'superKM',
          des:'武汉加油'
        }, {
          url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',
          cover: 'http://oss.jishiyoo.com/images/file-1575343195934.jpg',
          tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449298299M3V50.jpg',
          fabulous: true,//是否赞过
          tagFollow: false,//是否关注过该作者
          author_id: 2,//作者ID
          author:'superKM',
          des:'中国加油'
        }, {
          url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',
          cover: 'http://oss.jishiyoo.com/images/file-1575343262684.jpg',
          tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
          fabulous: false,//是否赞过
          tagFollow: false,//是否关注过该作者
          author_id: 1,//作者ID
          author:'superKM',
          des:'武汉加油'
        }, {
          url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',
          cover: 'http://oss.jishiyoo.com/images/file-1575343508574.jpg',
          tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
          fabulous: false,//是否赞过
          tagFollow: false,//是否关注过该作者
          author_id: 1,//作者ID
          author:'superKM',
          des:'中国加油'
        }],
      }
    },
    methods:{
      // 开始播放
      playvideo(event) {
        let video = document.querySelectorAll('video')[this.current];
        console.log("playvideo：" + this.current);
        this.isVideoShow = false;
        this.iconPlayShow = false;
        this.showShareBox = false;
        video.play();
        window.onresize = function () {
          video.style.width = window.innerWidth + "px";
          video.style.height = window.innerHeight + "px";
        }
        videoProcessInterval = setInterval(() => {
          this.changeProcess(video)
        }, 100)
      },
      pauseVideo() { //暂停\播放
        try {
          let video = document.querySelectorAll('video')[this.current];
          console.log("pauseVideo" + this.current);
          if (this.playOrPause) {
            video.pause();
            this.iconPlayShow = true;
            clearInterval(videoProcessInterval)
          } else {
            // wx.ready(() => {
            //     // 在微信的ready中进行播放 不管成功配置与否 都会执行ready
            //     video.play();
            // })
            video.play();
            video.pause();
            setTimeout(()=>{
              video.play();
              this.iconPlayShow = false;
              videoProcessInterval = setInterval(() => {
                this.changeProcess(video)
              }, 100)
            },100)
          }
          this.playOrPause = !this.playOrPause;
          this.showShareBox = false;
        } catch (e) {
          alert(e)
        }


      },
      //滑动改变播放的视频
      onChange(index) {
        //改变的时候 暂停当前播放的视频
        clearInterval(videoProcessInterval)
        this.videoProcess = 0;
        let video = document.querySelectorAll('video')[this.current];
        video.pause();
        this.playOrPause = false;
        this.showShareBox = false;
        this.current = index
        //非ios切换直接自动播放下一个
        if(!this.isiOS){
          this.isVideoShow = false;
          setTimeout(() => {
            this.pauseVideo()
          }, 100)
        }else{
          //ios官方禁止video自动播放，未找到合适的方法，如果您发现了，麻烦告诉我一下谢谢啦
          // this.playOrPause = true;
          // this.iconPlayShow = true;
          document.addEventListener("WeixinJSBridgeReady",function () {
            video.play();
          },false)
        }


      },
      //记录播放进度
      changeProcess() {
        let video = document.querySelectorAll('video')[this.current];
        let currentTime = video.currentTime.toFixed(1);
        let duration = video.duration.toFixed(1);
        this.videoProcess = parseInt((currentTime / duration).toFixed(2) * 100)
      },
      onPlayerEnded(player) { //视频结束
        this.isVideoShow = true
        this.current += this.current
      },
    },
    computed:{

    },
    created(){

    }
  }
</script>
<style scoped>
  .van_swipe {
    width: 100vw;
    height: 100vh;
    max-width: 550px;
    margin: 0 auto;
    position: relative;
  }
  .my-swipe{
    width: 100vw;
    height: 100vh;
  }
  .product_swiper{
    width: 100vw;
    height: 100vh;
  }
  .icon_play {
    position: absolute;
    top: 40%;
    right: 0;
    left: 0;
    bottom: auto;
    margin: auto;
    z-index: 999;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
  .tools_right{
    position: absolute;
    right: 5px;
    top: 580px;
    width: 100px;
  }
  .tag_image{
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0px 0px 10px #9d9d9d;
  }
  .add{
    position: relative;
    color: #E6455A;
    right: -25px;
    top: -50px;
    font-size: 50px;
  }
</style>
